JavaScript y D3
IIC2026
DOM
JavaScript y D3
IIC2026
Document Object Model
Forma de representar el contenido de un documento HTML como objeto de programación.
Document Object Model
<!DOCTYPE html>
<html>
...
</html>
Document Object Model
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Document Object Model
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Document Object Model
(Fuente: DOM en Wikipedia)
Document Object Model
console.log(document.URL);
document.children; // [<html>]
Document Object Model
const elemento = document.getElementById("identificador");
Document Object Model
const elemento = document.getElementById("identificador");
const parrafo = document.createElement("p");
Document Object Model
const elemento = document.getElementById("identificador");
const parrafo = document.createElement("p");
const texto = document.createTextNode("¡Soy texto!");
Document Object Model
const elemento = document.getElementById("identificador");
const parrafo = document.createElement("p");
const texto = document.createTextNode("¡Soy texto!");
parrafo.appendChild(texto);
Document Object Model
const elementoRaiz = document.getElementById("raiz");
const parrafo = document.createElement("p");
const texto = document.createTextNode("¡Soy texto!");
parrafo.appendChild(texto);
elementoRaiz.appendChild(parrafo);
Document Object Model
// Define una única clase a elemento
elemento.className = "importante";
// Agrega una clase al elemento
elemento.classList.add("otra clase");
// Remueve una clase al elemento
elemento.classList.remove("otra clase");
// Define una único id a elemento
elemento.id = "principal";
Document Object Model
// Conecta ocurrencia de evento sobre elemento a función
elemento.addEventListener(evento, funcion);
Document Object Model
const raiz = document.getElementById("raiz");
const principal = document.getElementById("principal");
let contador = 0;
principal.addEventListener("click", () => {
contador += 1;
const parrafo = document.createElement("p");
const texto = document.createTextNode(`Número de clics: ${contador}`);
parrafo.appendChild(texto);
raiz.appendChild(parrafo);
});